<!doctype html>
<html>
<head>
<meta charset="utf-8">

<!--bootstrap和jQuery的调用，用于UI设计和网页交互的基础库-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="no-referrer">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/bootstrap.bundle.min.js"></script> 
<script src="js/echarts.js"></script> 
<script src="js/socket.io.js"></script> 
<script src="js/vue.global.js"></script> 

<!--网站标题图标，自定义的css和js的调用-->
<title>Device Data</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>

<body>
<div id="maincontrol" class="container-fluid">
    <div class="row" v-show="boardShow == 0">
        <div class="col-7">
            <div id="main" style="width: 100%px;height:480px;"></div>
        </div>
        <div class="col-5">
            <hr>
            <div class="text-center">
                <h2>器件数据采集</h2>
            </div>
            <hr>
            <div class="row">
                <div class="col-6 pr6">
                    <div class="btn btn-outline-primary" onClick="fresh()">刷新</div>
                </div>
                <div class="col-6 pl6">
                    <div class="btn btn-outline-primary" onClick="full()">全屏</div>
                </div>
            </div>
            <div class="row">
                <div class="col-auto">
                    <div class="btn btn-outline-primary" @Click="preMode">&lt;&lt;</div>
                </div>
                <div class="col">
                    <div v-for="(item,name,index) in board2.paras"
                         v-show="board1.showMode == index"
                         class="btn btn-outline-light" 
                         @Click="collect('#'+name);board1.isPaused=false"
                         v-cloak
                         >{{item.name}}</div>
                </div>
                <div class="col-auto">
                    <div class="btn btn-outline-primary" @Click="nextMode">&gt;&gt;</div>
                </div>
            </div>
            <div class="row">
                <div class="col-6 pr6" v-show="!board1.isPaused">
                    <div class="btn btn-outline-primary" @Click="send('#pause');board1.isPaused=true">暂停</div>
                </div>
                <div class="col-6 pr6" v-show="board1.isPaused" v-cloak>
                    <div class="btn btn-outline-primary" @Click="send('#continue');board1.isPaused=false">继续</div>
                </div>
                <div class="col-6 pl6">
                    <div class="btn btn-outline-danger" @Click="stop();board1.isPaused=false">停止</div>
                </div>
            </div>
            <div class="row">
                <div class="col-6 pr6">
                    <div class="btn btn-outline-primary d-block" @Click="boardShow = 1">设置</div>
                </div>
                <div class="col-6 pl6">
                    <div class="btn btn-outline-primary" @Click="savedata()">保存</div>
                </div>
            </div>
            <div class="btn btn-outline-danger d-block" onClick="clearScreen()">清除</div>
            <div id="message" style="width: 100%;height: 80px;border: solid rgba(204,204,204,1.00);overflow-y:auto;margin-top: 5px;"></div>
            <div class="row">
                <div class="col-7 npr">
                    <div class="text-end" style="margin-top: 5px;"> <span class="btn btn-outline-light btn-sm"
					  style="display:inline-block; width:100%; height:28px; border: solid thin rgba(204,204,204,1.00); ">
                        <div class="text-start"
						style="height:100%; width:50px;overflow:visible; white-space: nowrap; font-size:14px;line-height:16px;background: green"
						:style="{width: board1.prcPercent}"> <strong>{{board1.process}}: {{board1.prcPercent}}</strong> </div>
                        </span> </div>
                </div>
                <div class="col-5 npl">
                    <div class="text-end" style="margin-top: 5px;"> <span class="btn btn-outline-light btn-sm"
					  style="display:inline-block; width:100%; height:28px; border: solid thin rgba(204,204,204,1.00); ">
                        <div style="height:100%; width:50px;overflow:visible; white-space: nowrap; font-size:14px;line-height:16px;"
						:style="{width: board1.btrPercent,background: board1.isCharging ? 'green':'brown'}"> <strong> {{board1.btrPercent}} <span v-if="board1.isCharging">C</span> <span v-else>B</span> </strong> </div>
                        </span> </div>
                </div>
            </div>
        </div>
    </div>
    <div  class="row" v-show="boardShow == 1" v-cloak>
        <div class="col-3">
            <hr>
            <div class="text-center">
                <h2>模式</h2>
            </div>
            <hr>
            <div v-for="(mode,index) in board2.paras"
                 class="btn btn-outline-primary d-block"
                 :class="{'btn-outline-light':board2.boardShow == index}"
                 @Click="board2.boardShow = index;board2.select = index+'.AGND'">{{mode.name}}</div>
        </div>
        <div class="col-5 text-center">
            <hr>
            <div class="row" v-for="(p,indexF) in board2.paras" v-show = "board2.boardShow == indexF">
                <div v-for="(para,index) in p.para" @click="board2.select = indexF +'.'+index">
                    <div class="btn btn-outline-primary d-inline-block" 
                         :class="{'btn-outline-light':board2.select == indexF +'.'+index}" 
                         style="width: 50%;"
                         >{{index}}</div>
                    <input class="btn btn-dark" 
                           :class="{'btn-secondary':board2.select == indexF +'.'+index}" 
                           type="text" v-model="para" style="width: 50%;" disabled/>
                </div>
            </div>
            <hr>
        </div>
        <div class="col-4">
            <hr>
            <div class="text-center">
                <h2>采集参数设置</h2>
            </div>
            <hr>
            <div id="calculator"> 
                <!--<input v-model="screen" class="btn" :class="{'btn-danger':iserror,'btn-outline-primary':!iserror}" disabled />-->
                <ul>
                    <li v-for="keys in board2.allkey">
                        <button v-for="key in keys" @click="numType(key)" class="btn btn-outline-primary" style="width:50px">{{key}}</button>
                    </li>
                </ul>
            </div>
            <hr>
            <div class="row">
                <div class="col-6 pr6">
                    <div class="btn btn-outline-primary d-block" @Click="savePara">保存参数</div>
                </div>
                <div class="col-6 pl6">
                    <div class="btn btn-outline-primary d-block" @Click="getDefault">恢复默认</div>
                </div>
            </div>
            <div class="btn btn-outline-danger d-block" @Click="boardShow = 0">返回</div>
        </div>
    </div>
		<pop-window 
            type="alert" 
            :show="board1.alertMessage" 
            @confirmed="board1.alertMessage='';sample()"
    ></pop-window>
    <pop-window 
        type="confirm" 
        :show="board1.sampleConfirm" 
        :title="'是否继续滴加样品？'"
        @confirmed="board1.sampleConfirm = false;sample()"
        @cancelled="board1.sampleConfirm = false;"
    ></pop-window>
</div>
</body>
</html>
